<template>
    <div id="modulerleft" class="container-fluid">
        <div class="row bgcolorqi1">
            <button type="button" v-for="(v,k) in modular" :key="k" class="btn-block btn btn-sm bgcolorsh" :class="bgclass(k)" v-text="v.name" @click="bgcolor(k)"> </button>
        </div>

        <aside class="mod-bottom row  bgcolorqi1" id="modularleftb">
            <div class="col-md-6 text-center"  v-for="(v,k) in modeindex.mode" :key="k">
                <router-link class="mo-block bgcolorsh block" :key="k"  :title="v.name"  :to="{ name: 'modular', params: { id: k },query: {model: indexs} }">
                  <img :src="v.img"   alt="">
                </router-link>
                  <span v-text="v.name" ></span>
            </div>
        </aside>
    </div>

</template>

<script>
function changeDivHeightc() {
  try{
let height = window.innerHeight;
    document.getElementById("modularleftb").style.height = height - 425 + "px";
  }catch(err) {

  }
}

window.onresize = function() {
  changeDivHeightc();
  changeDivHeight()
};
export default {
  data() {
    return {
      modular: modulars,
      indexs: 0,
      modeindex: modulars[0]
    };
  },
  mounted() {
    changeDivHeightc()
    this.indexs = this.$route.query.model ? this.$route.query.model : 0;
    this.modeindex = modulars[this.indexs]
  },
  methods: {
    bgcolor(i) {
      this.indexs = i;
      this.modeindex = modulars[i];
    },
    bgclass(k) {
      if (k == this.indexs) {
        return "bg20cdb4";
      }
    },
    id(i) {
      return (i + 1) * (this.indexs + 1);
    }
  }
};
</script>

<style scoped>
img {
  max-width: 100%;
  padding: 5px;
  margin-top: 10px;
}
.bgcolorqi1 {
  padding-top: 5px;
  padding-bottom: 5px;
}

.btn-sm {
  margin-top: 2px;
  margin-bottom: 2px;
  font-size: 12px;
  width: 70px;
  height: 34px;
  border-radius: 6px;
  border: 1px solid rgb(255, 247, 153);
  margin-left: 3px;
  margin-right: 3px;
}
.mod-bottom {
  margin-top: 3px;
}
.col-md-4 {
  padding-left: 0;
  padding-right: 0;
}
.col-md-6 {
  padding: 0;
}
.mo-block {
  display: block;
  width: 110px;
  height: 110px;
  border: 2px solid #fff799;
  margin: 20px;
  text-align: center;
  border-radius: 14px;
}
.bg20cdb4 {
  background-color: #20cdb4;
}
.router-link-exact-active {
  box-shadow: 4px 8px 4px rgba(0, 0, 0, 0.2);
}

#modularleftb {
    overflow-y: scroll;
}
</style>
